import { Button } from "antd";
import React, { useState, useRef, useEffect } from "react";
import bg from "./塔罗背景.png";
export default function Tarot() {
  const h = window.innerHeight;
  const w = window.innerWidth;
  const [tarotCard, setTarotCard] = useState(tarotCards.length - 1);
  const [positive, setPositive] = useState(true);
  const [isRunning, setIsRunning] = useState(false);
  const intervalRef = useRef(null);
  const chouka = () => {
    setTarotCard(Math.floor(Math.random() * tarotCards.length));
    setPositive(Math.random() < 0.5 ? true : false);
  };
  const toggleInterval = () => {
    if (!isRunning) {
      intervalRef.current = setInterval(chouka, 50);
      setIsRunning(true);
    } else {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
      setIsRunning(false);
    }
  };
  useEffect(() => {
    console.log(h,w)
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);
  return (
    <div
      style={{
        height: h,
        width: w,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        // padding: 32,
        backgroundImage: `url(${bg})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        color: "#fff",
      }}
    >
      <img
        style={{
          height: "50vh",
          transform: positive ? null : "rotate(180deg)",
          transformOrigin: "center",
        }}
        src={tarotCards[tarotCard].img}
        alt=""
      ></img>
      <div style={{ fontSize: 18, fontWeight: "bold" }}>
        {" "}
        {positive ? "正位" : "逆位"}的{tarotCards[tarotCard].name}{" "}
      </div>

      <div style={{ height: 160,width:h>w?null:h*0.6 ,padding:16}}>
                {tarotCards[tarotCard].dis[positive ? 0 : 1]}
      </div>
      <Button onClick={toggleInterval}>
        {!isRunning ? "开始洗牌" : "停止洗牌"}
      </Button>
    </div>
  );
}
const tarotCards = [
  {
    name: "愚者",
    dis: [
      "正位的愚者代表着一种与众不同、追求新奇的梦想和自由的象征。这张牌的出现，通常意味着你正在经历一种天真、浪漫、冒险和大胆的旅程，追求自己的内心真实和灵性的连结。",
      "逆位的愚者暗示着一种缺乏理性和判断力的状态。这可能表现为过于冲动、盲目乐观、不顾后果的行为，缺乏对现实的清醒认识和理性思考。",
    ],
    img:
      "https://img.zcool.cn/community/01429b603e166711013ef90f487dd6.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "魔术师",
    dis: [
      "正位的魔术师是塔罗牌中的一张正立牌，代表着智慧、掌控、创造力和改变。这张牌的出现，通常意味着你有能力掌控自己的命运，通过智慧和创造力实现自己的目标。",
      "逆位的魔术师代表着失去掌控、失去创造力、无法实现目标、情绪不稳定、沟通不畅等负面含义。这张牌的出现，通常意味着你可能会面临一些挑战和困难，需要重新审视自己的计划和目标，并采取积极的行动来解决问题。",
    ],
    img:
      "https://img.zcool.cn/community/01ba3a603e167811013f3745b07da2.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "女教皇",
    dis: [
      "正位的女教皇代表着直觉、智慧和内在的指引。这张牌的出现，通常意味着你有一种天赋的洞察力和预见力，能够理解自己和他人的内心世界，并从中获取启示和指导。",
      "逆位的女教皇代表着内心的困惑和阻碍，缺乏智慧和指引。这张牌的出现，可能暗示着你内心存在一些矛盾和冲突，需要克服自己的情绪和心理障碍，寻求内在的和谐与统一。",
    ],
    img:
      "https://img.zcool.cn/community/018a06603e167e11013f37451a09d1.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "皇帝",
    dis: [
      "正位的皇帝是塔罗牌中的一张正立牌，代表着权威、稳定、秩序和掌控。这张牌的出现，通常意味着你正在经历一种稳定、有组织的状态，能够掌控自己的生活和事业。",
      "正位的皇帝是塔罗牌中的一张正立牌，代表着权威、稳定、秩序和掌控。这张牌的出现，通常意味着你正在经历一种稳定、有组织的状态，能够掌控自己的生活和事业。",
    ],
    img:
      "https://img.zcool.cn/community/01de6a603e168811013f3745eb6590.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "女皇",
    dis: [
      "正位的女皇代表着优雅、温柔、感性和自然之美。这张牌的出现，通常意味着你正在经历一种自然流畅、富有感性和美感的状态，能够与他人和谐相处，享受生活的美好。",
      "逆位的女皇可能代表着过度依赖他人、缺乏自我认知和自我价值、无法应对挑战和困难等负面含义。这张牌的出现，可能暗示着你正在经历一种缺乏自信、无法独立应对问题的状态，需要重新审视自己的内心世界和价值观。",
    ],
    img:
      "https://img.zcool.cn/community/01e032603e168411013ef90fd189ec.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "教皇",
    dis: [
      "正位的教皇代表着智慧、启示和引导。这张牌的出现，通常意味着你有一种天赋的洞察力和预见力，能够理解自己和他人的内心世界，并从中获取启示和指导。",
      "逆位的教皇可能代表着权威的减弱、掌控力的丧失、稳定性的打破以及混乱和无序的状态。这张牌的出现，通常意味着你正在经历一种不稳定、无组织的状态，无法有效地掌控自己的生活和事业。",
    ],
    img:
      "https://img.zcool.cn/community/0143e9603e168e11013ef90f39c5a9.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "恋人",
    dis: [
      "正位的恋人代表着爱情甜蜜，被祝福的关系，刚萌芽的爱情，顺利交往，美满的结合，面临工作学业的选择，面对爱情的抉择，下决定的时刻，合作顺利。这张牌暗示一段新关系，或既有关系的新阶段。",
      "逆位的恋人牌代表着爱情中的离别、矛盾和决裂。这张牌的出现可能意味着爱情关系中出现了重大的问题，例如不忠、信任缺失、意见不和或决裂。它也可能代表着在感情方面做出了错误的选择，导致后悔和悲伤。",
    ],
    img:
      "https://img.zcool.cn/community/017e3a603e169311013ef90f47a9cb.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "战车",
    dis: [
      "正位的战车代表着掌控、决心和胜利。这张牌的出现，通常意味着你有着坚定的决心和强大的意志力，能够掌控自己的生活和事业，实现自己的目标和梦想。",
      "逆位的战车可能代表着失去掌控、犹豫不决、失败和挫败。这张牌的出现，可能意味着你在面对挑战和困难时缺乏决心和勇气，无法有效地掌控自己的生活和事业。",
    ],
    img:
      "https://img.zcool.cn/community/013985603e169811013f37456c749a.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "力量",
    dis: [
      "正位的力量代表着自信、力量和勇气。这张牌的出现，通常意味着你有着自信和决心，能够掌控自己的生活和事业，实现自己的目标和梦想。",
      "逆位的力量可能代表着缺乏自信、软弱无力、犹豫不决和失败。这张牌的出现，可能意味着你在面对挑战和困难时缺乏自信和勇气，无法有效地掌控自己的生活和事业。",
    ],
    img:
      "https://img.zcool.cn/community/011d01603e169c11013f374562b19c.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "隐士",
    dis: [
      "正位的隐士代表着独立、孤独、内省和智慧。这张牌的出现，通常意味着你正在经历一种独立、内省的状态，通过独自思考和反思，寻求内在的真理和智慧。",
      "逆位的隐士可能代表着过度依赖他人、缺乏自信和独立性。这张牌的出现，可能意味着你在面对挑战和困难时缺乏自信和勇气，无法独立应对问题。",
    ],
    img:
      "https://img.zcool.cn/community/0127c5603e16a211013f37457a7078.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "命运之轮",
    dis: [
      "正位的命运之轮代表着转变、机会和好运。这张牌的出现，通常意味着你的生活正在经历一种积极的转变，可能会带来新的机遇和挑战。",
      "逆位的命运之轮则可能代表着不幸的转变和挫折。这张牌的出现，可能意味着你的生活正在经历一种不利的转变，可能会带来一些困难和挑战。它也可能暗示着你在面对困难和挑战时缺乏勇气和决心，无法有效地应对和改变自己的命运。",
    ],
    img:
      "https://img.zcool.cn/community/015cea603e16a611013f3745583700.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "正义",
    dis: [
      "正位的正义代表着公正、公平和明智的决定。这张牌的出现，通常意味着你正在经历一种公正和公平的状态，能够做出明智的决策和判断。",
      "逆位的正义可能代表着不公正、偏见和错误的判断。这张牌的出现，可能意味着你在面对问题时缺乏公正和公平的立场，无法做出明智的决策和判断。",
    ],
    img:
      "https://img.zcool.cn/community/01260f603e16ac11013ef90fd54d09.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "倒吊人",
    dis: [
      "正位的倒吊人代表着接受挑战、面对困难、无畏付出和耐心等待。这张牌的出现，通常意味着你正在经历一种需要接受挑战和面对困难的状态，但你能够无畏付出，耐心等待，最终获得成功。",
      "逆位的倒吊人形象可能变得消极、沮丧和无力，缺乏面对困难的勇气和决心。这张牌暗示着一种无法坚持和缺乏耐心的状态，需要你重新审视自己的态度和行为，以更好地应对挑战和困难。",
    ],
    img:
      "https://img.zcool.cn/community/016ff2603e16b211013ef90fa4715a.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "死神",
    dis: [
      "正位的死神代表着转变和新生。这张牌的出现，通常意味着你的生活正在经历一种重大的转变，可能是好的方面，也可能是坏的方面。它可能暗示着结束过去的状态或习惯，重新开始新的旅程。",
      "逆位的死神可能代表着无法摆脱的厄运、痛苦和疾病。这张牌的出现，可能意味着你在面对困难和挑战时缺乏勇气和决心，无法克服过去的困境和挫折。它也可能暗示着健康问题或不良的生活习惯需要改变。",
    ],
    img:
      "https://img.zcool.cn/community/0119d1603e16b711013ef90f725630.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "节制",
    dis: [
      "正位的节制代表着自我控制、调和和净化。它象征着在生活中的各个方面找到平衡，并学会在不同的情况和环境中保持冷静和清醒，节制牌也代表着从过去的经验中学习，通过调和内在的矛盾和冲突，实现个人的成长和发展。",
      "逆位的节制可能暗示着过度、沉溺或缺乏自我控制。你可能感到生活中的某些方面失去了平衡，导致焦虑、困惑或内心的冲突。这张牌也可能意味着你需要更加关注自己的身体、情绪或精神健康，以避免过度消耗自己的能量和资源。",
    ],
    img:
      "https://img.zcool.cn/community/01a3d4603e16bb11013ef90fbcb3cb.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "恶魔",
    dis: [
      "正位的恶魔通常代表着束缚、限制和诱惑。它可能暗示着你被某些不健康的习惯、关系或信念所束缚，阻碍了自己的成长和发展。恶魔牌也可能代表着对物质或情感的过度依赖，导致你失去了自己的独立性和自主性。",
      "逆位的恶魔可能意味着逃离束缚、重获自由和解放。你可能开始认识到自己生活中的限制和束缚，并采取积极的行动来改变自己。这张牌也可能暗示着你需要更加关注自己的内在需求和价值，以摆脱外在的诱惑和干扰。",
    ],
    img:
      "https://img.zcool.cn/community/01da05603e16c111013ef90f61128d.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "高塔",
    dis: [
      "正位的高塔代表着突变、灾难和毁灭。它通常意味着你的生活正在经历一种剧烈的转变或破裂，可能是由于外部事件或内在的矛盾和冲突所导致的。高塔牌也可能暗示着你需要放弃过去的信念、习惯或关系，以便为新的生活和成长腾出空间。",
      "逆位的高塔可能意味着逃避或抵制改变。你可能感到自己的生活缺乏稳定性和安全性，但又害怕面对未知和挑战。这张牌也可能暗示着你需要更加关注自己的内在需求和情感，以建立更加健康和稳定的基础，来应对生活中的变化和挑战。",
    ],
    img:
      "https://img.zcool.cn/community/011b16603e16c711013f374564b0ee.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "星辰",
    dis: [
      "正位的星辰代表着新的开始、转变和成长。它可能暗示着你正在经历一种积极的转变，或者是在为未来的发展做准备。星辰牌也可能意味着你的生活充满了希望和可能性，需要你保持积极的态度和信心，勇敢地追求自己的梦想。",
      "逆位的星辰可能暗示着阻碍、困难和失望。你可能感到自己的生活出现了问题或停滞不前，需要付出更多的努力来克服困难。这张牌还可能暗示着健康方面的问题，例如失眠、疲劳等。你需要关注自己的身体健康，保持良好的作息习惯。",
    ],
    img:
      "https://img.zcool.cn/community/01bcb3603e16cc11013f3745b52ed9.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "月亮",
    dis: [
      "正位的月亮代表着内在的情感、感受和潜意识。它可能暗示着你对自己的内心世界有了更深入的了解，能够更好地处理自己的情感和情绪。月亮牌也象征着家庭和朋友的支持和陪伴，可能需要更多地与他们沟通和交流。",
      "逆位的月亮可能暗示着内心的混乱和不安定。你可能感到自己无法控制自己的情绪和行为，需要更加理性和冷静地面对自己的情感问题。逆位的月亮还可能暗示着健康方面的问题，例如睡眠障碍、焦虑等。你需要关注自己的身心健康，寻求专业帮助。",
    ],
    img:
      "https://img.zcool.cn/community/01afb7603e16d011013ef90f51d508.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "太阳",
    dis: [
      "正位的太阳代表着新的开始、目标和希望。它可能暗示着你正在经历一种积极的状态，有勇气去追求自己的目标并实现自己的理想。太阳牌还可能意味着好运和成功，需要你保持积极的心态和坚定的信念，迎接挑战并取得胜利。",
      "逆位的太阳可能暗示着挫折、失败和不满足感。你可能感到自己在生活中失去了动力和热情，需要重新审视自己的目标和计划，寻找更好的解决方案",
    ],
    img:
      "https://img.zcool.cn/community/01822f603e167411013f374519999a.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "审判",
    dis: [
      "正位的审判代表此时你有清晰的判断力。这张牌的出现，通常意味着你正在经历一次重要的转变或觉醒，这可能需要你对自己的过去进行深入的审视和反思。这张牌也暗示着，只有通过内省和自责，才能真正达到内心的平静和宽恕",
      "逆位的审判可能意味着你在面对重要决策或转变时感到困惑和犹豫。你可能缺乏清晰的判断力，难以做出决定，或者你可能在内心深处对自己的选择感到不确定。",
    ],
    img:
      "https://img.zcool.cn/community/018272603e16d411013ef90fddad02.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
  {
    name: "世界",
    dis: [
      "正位的世界牌代表宇宙的重点，与大阿尔卡那得第10张命运之轮相呼应。四方依然是狮子，飞鹰，天使和神牛，中间不再是命运之轮，而是一个在月桂花环中舞蹈的少女。她一手拿着一个魔杖，又似乎是一把钥匙，正在为步入重点地人喝彩，又或是一种召唤，在引导胜利者走到智慧之门眼前，接过他手中开启幸福的钥匙。",
      "世界牌的逆位可能暗示着一些不利的转变或情况。它可能意味着你正在经历一种不稳定的状态，或者你对生活的期望和目标不够清晰。",
    ],
    img:
      "https://img.zcool.cn/community/011fe5603e16d811013f3745f6f321.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100/format,webp",
  },
];
